<template>
  <el-form ref="formRef"
           :model="form"
           label-position="top"
           label-width="120px"
           class="stylePreviewBox">
    <el-row :gutter="10">
      <el-col :xs="24" :lg="12">
        <el-form-item label="Button按钮">
          <CButton></CButton>
        </el-form-item>

        <el-form-item label="链接">
          <Clink></Clink>
        </el-form-item>

        <el-form-item label="单选框与多选框">
          <CRadio></CRadio>
        </el-form-item>

        <el-form-item label="输入框-数字输入框-Select选择器-Cascader级联选择器">
          <CInput></CInput>
        </el-form-item>

        <el-form-item label="Switch 开关 - 滑块">
          <CSwitch></CSwitch>
        </el-form-item>

        <el-form-item label="日期选择器">
          <CDatePicker></CDatePicker>
        </el-form-item>

        <el-form-item label="树形结构">
          <CTree></CTree>
        </el-form-item>

        <el-form-item label="Transfer 穿梭框">
          <CTransfer></CTransfer>
        </el-form-item>

        <el-form-item label="Tabs 标签页">
          <CTabs></CTabs>
        </el-form-item>

        <el-form-item label="Dialog 对话框">
          <CDialog></CDialog>
        </el-form-item>

        <el-form-item label="折叠面板">
          <CCollapse></CCollapse>
        </el-form-item>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-form-item label="表格">
          <CTable></CTable>
        </el-form-item>

        <el-form-item label="Tag 标签 -Progress 进度条 - Result 结果">
          <CTag></CTag>
        </el-form-item>

        <el-form-item label="Alert 警告 - Notification 通知">
          <CAlert></CAlert>
        </el-form-item>

        <el-form-item label="Timeline 时间线 - 卡片">
          <CTimeline></CTimeline>
        </el-form-item>

        <el-form-item label="NavMenu 导航菜单">
          <CNavMenu></CNavMenu>
        </el-form-item>

        <el-form-item label="Avatar 头像">
          <CAvatar></CAvatar>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {defineAsyncComponent} from 'vue'

export default {
  name: "StylePreview",
  components: {
    "CButton": defineAsyncComponent(() => import('@/components/stylePreview/CButton')),
    "Clink": defineAsyncComponent(() => import('@/components/stylePreview/Clink')),
    "CRadio": defineAsyncComponent(() => import('@/components/stylePreview/CRadio')),
    "CInput": defineAsyncComponent(() => import('@/components/stylePreview/CInput')),
    "CSwitch": defineAsyncComponent(() => import('@/components/stylePreview/CSwitch')),
    "CDatePicker": defineAsyncComponent(() => import('@/components/stylePreview/CDatePicker')),
    "CTree": defineAsyncComponent(() => import('@/components/stylePreview/CTree')),
    "CTransfer": defineAsyncComponent(() => import('@/components/stylePreview/CTransfer')),
    "CTable": defineAsyncComponent(() => import('@/components/stylePreview/CTable')),
    "CTag": defineAsyncComponent(() => import('@/components/stylePreview/CTag')),
    "CAlert": defineAsyncComponent(() => import('@/components/stylePreview/CAlert')),
    "CTimeline": defineAsyncComponent(() => import('@/components/stylePreview/CTimeline')),
    "CNavMenu": defineAsyncComponent(() => import('@/components/stylePreview/CNavMenu')),
    "CTabs": defineAsyncComponent(() => import('@/components/stylePreview/CTabs')),
    "CDialog": defineAsyncComponent(() => import('@/components/stylePreview/CDialog')),
    "CCollapse": defineAsyncComponent(() => import('@/components/stylePreview/CCollapse')),
    "CAvatar": defineAsyncComponent(() => import('@/components/stylePreview/CAvatar')),
  },
  data() {
    return {
      form: {}
    }
  }
}
</script>

<style lang="scss">
.stylePreviewBox{
  .el-form-item__label{
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
